<template>
	<div ref="menuRef">
		<div
			v-for="(group, index) in menuList"
			:key="index"
			class="overflow-hidden"
			v-show="group.isShow">
			<template v-for="item in group.children" :key="item.id">
				<base-link :to="item.path">
					<app-menu-item :data="item" />
				</base-link>
				<transition @enter="onEnter" @leave="onLeave">
					<div v-if="layoutStore.menuGroupOpen === item.id">
						<base-link v-for="subitem in item?.children" :key="subitem.id" :to="subitem.path">
							<app-menu-item :data="subitem" />
						</base-link>
					</div>
				</transition>
			</template>
			<div
				v-show="group.isShow && index !== menuList.length - 1"
				class="base-divider h-[2px] my-[6px] bg-border-1 mb-[10px]" />
		</div>
	</div>
</template>
<script lang="ts" setup>
import menuData from './data.ts'
import { useLayoutStore, useCasinoStore, useAppStore, useAccountStore } from '@/store'
import AppMenuItem from './app-menu-item.vue'
import gsap from 'gsap'
import { BaseLink } from '@/components/base'
import { ref, onMounted, watch } from 'vue'
import { useRequest } from '@/hooks'
import { getGameTagList } from '@/api/other'
import { useRouter, useRoute } from 'vue-router'
const { run, data } = useRequest<any>(getGameTagList)
//import { t } from '@/utils'

defineOptions({ name: 'AppMenu' })

const layoutStore = useLayoutStore()
const casinoStore = useCasinoStore()
const appStore = useAppStore()
const menuRef = ref(null)
const tagList = ref([])
const router = useRouter()
const route = useRoute()
const accountStore = useAccountStore()

const onEnter = (el: any, done: any) => {
	gsap.from(el, {
		height: 0,
		opacity: 0,
		duration: 0.3,
		ease: 'power1.in',
		onComplete: done
	})
}

const onLeave = (el: any, done: any) => {
	gsap.to(el, {
		height: 0,
		opacity: 0,
		duration: 0.3,
		ease: 'power1.out',
		onComplete: done
	})
}

const menuList = ref(menuData)
// const showMenus = computed(() => {
// 	return menuData.filter((item) => {
// 		if (item.id === 'typeGroup' && layoutStore.menuOpen) {
// 			return false
// 		}
// 		if (item.type && layoutStore.menuType !== item.type) {
// 			return false
// 		}
// 		return true
// 	})
// })

const getCasinoData = async () => {
	menuList.value.forEach((element) => {
		if (element.type === 'casino') {
			element.isShow = true
		}
		if (element.id === 'casinoGroup') {
			element.children = casinoStore.sideMenuCasinoList
		}
	})
	await run({ displayLocation: 'CASINO_LEFT_TAG_DISPLAY' })
	tagList.value = data.value

	let newList = [] as any

	data.value.forEach((element: any) => {
		let obj = {
			id: element.labelCode,
			text: element.labelName,
			icon: element.labelIcon,
			path: `/casino/tags/${element.tagSlug}`,
			iconType: 'network',
			name: element.tagSlug
		}
		newList.push(obj)
	})
	let provider = {
		id: 'provider',
		textT: 'slotsall.providers',
		path: '/casino/providers',
		icon: 'provider',
		name: 'casinoProvider'
	}
	newList.push(provider)
	menuList.value.forEach((element) => {
		if (element.id === 'casinoGroup') {
			element.children = newList
			casinoStore.setSideMenuCasinoList(newList)
		}
	})
}

const getSportsData = async () => {
	resetMenu()
}
const resetMenu = () => {
	menuList.value.forEach((element) => {
		if (element.type === 'casino' || element.type === 'sports') {
			element.isShow = false
		}
		if (element.id === 'casinoGroup') {
			element.children = []
		}
		if (element.id === 'sportsGroup') {
			element.children = []
		}
	})
}
const getData = () => {
	const item = route
	if (item.meta.category === 'casino') {
		getCasinoData()
	} else if (item.meta.category === 'sports') {
		getSportsData()
	} else {
		resetMenu()
	}
}
const showProfileData = () => {
	const isLogin = accountStore.isLogin
	menuList.value.forEach((element) => {
		if (element.id === 'profileGroup') {
			element.isShow = isLogin
			layoutStore.setMenuGroupOpen('profile')
		}
	})
}

watch(
	() => [appStore.mobileMenuShow],
	() => {
		getData()
	},
	{ immediate: true }
)
watch(
	() => [accountStore.isLogin],
	() => {
		showProfileData()
	}
)
watch(
	() => router.currentRoute.value,
	() => {
		getData()
		showProfileData()
	}
)
onMounted(() => {
	showProfileData()
})
// watch(
// 	() => layoutStore.menuOpen,
// 	(val) => {
// 		if (val) {
// 			gsap.to(menuRef.value, {
// 				width: '208px',
// 				duration: 0.3
// 			})
// 		} else {
// 			gsap.to(menuRef.value, {
// 				width: '46px',
// 				duration: 0.3
// 			})
// 		}
// 	}
// )
</script>
